<script src='../../../../resources/gesture-util.js'></script>
<script src='../../../../resources/testharness.js'></script>
<script src='../../../../resources/testharnessreport.js'></script>

<style>
  html,body {
    margin: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    /* Checkerboard pattern for manual testing, so zooming is easily seen. */
    background-image:
      linear-gradient(45deg, #808080 25%, transparent 25%),
      linear-gradient(-45deg, #808080 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #808080 75%),
      linear-gradient(-45deg, transparent 75%, #808080 75%);
    background-size:80px 80px;
  }

  .message {
    width: 100%;
    text-align: center;
    background-color: aliceblue;
    font-size: xx-large;
  }
</style>

<div class="message">
  touch-action: none should prevent zooming on double-tap. Test manually by
  double-tapping anywhere. The page must not zoom-in.
</div>

<script>
  // Test that double-tapping on a region that's declared touch-action: none
  // doesn't cause the double-tap zoom gesture. This gesture is only supported
  // on some (Android and CrOS tablet-mode) platforms.
  promise_test(async () => {
    await waitForCompositorCommit();
    await doubleTapAt(400, 300);
    await conditionHolds(
        () => { return visualViewport.scale == 1; },
        "Double-tap causes zoom despite 'touch-action:none'!");
  }, "'touch-action: none' prevents double-tap zoom");
</script>
